@use '../../shared/_variables';

.ais-Chat {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--ais-spacing);
  align-items: flex-end;
  right: var(--ais-chat-margin);
  bottom: var(--ais-chat-margin);
  width: var(--ais-chat-width);
  height: var(--ais-chat-height);
  max-width: calc(100% - var(--ais-chat-margin) * 2);
  max-height: calc(100% - var(--ais-chat-margin) * 2);
  z-index: var(--ais-z-index-chat);
  pointer-events: none;

  &--maximized {
    width: var(--ais-chat-maximized-width);
    height: var(--ais-chat-maximized-height);
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: width var(--ais-transition-duration)
        var(--ais-transition-timing-function),
      height var(--ais-transition-duration)
        var(--ais-transition-timing-function);
  }
}

.ais-Chat-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(
    var(--ais-background-color-rgb),
    var(--ais-background-color-alpha)
  );
  border-radius: var(--ais-border-radius-lg);
  box-shadow: var(--ais-shadow-md);
  border: 1px solid rgba(var(--ais-border-color-rgb), 0.2);
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform-origin: bottom right;
  transform: scale(0.95) translateY(var(--ais-spacing));

  @media (prefers-reduced-motion: no-preference) {
    transition: opacity var(--ais-transition-duration)
        var(--ais-transition-timing-function),
      transform var(--ais-transition-duration)
        var(--ais-transition-timing-function);
  }

  &--open {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ais-Chat-toggleButtonWrapper {
  pointer-events: auto;
}

@media (max-width: variables.$ais-chat-breakpoint) {
  .ais-Chat {
    inset: 0;
    height: 100%;
    width: 100%;
    transition: none;
    max-width: initial;
    max-height: initial;
    gap: 0;
  }

  .ais-Chat-container {
    border-radius: 0;
    transition: none;
  }
}
